import React, { Component } from 'react';
import { ImageBackground, FlatList, View, Image, RefreshControl, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-native';
import { unitWidth, width } from '../constants/AdapterUtil';
import { MyHeader, MyRightImageHeader } from '../components/MyHeader';
import { api_member_info_bankList, api_member_info_delBank, api_member_info_SubAccountList, api_member_info_updateSubAccount } from '../constants/HttpServices';
import { postFetch } from '../constants/HttpExtension';
import Colors from '../constants/Colors';
import { show } from '../constants/Toast';
import MyListView from '../components/MyListView';

export default class AccountManagementScreen extends Component {

    constructor(props) {
        super(props)
        this.state = {
            list: [],
        }
    }

    componentDidMount() {
        this.props.navigation.addListener('didFocus', payload => {
            this.getData(1);
        })
    }

    render() {

        return (
            <View style={{ flex: 1, backgroundColor: Colors.colorF5 }}>
                <MyRightImageHeader title='子账户管理' leftImg={require('../res/ic_arrow_left.png')} leftClick={() => { this.props.navigation.pop() }}
                    rightImg={require('../res/me_grxx.png')} rightClick={() => {
                        this.props.navigation.navigate('AddAccount')
                    }} />
                <MyListView
                    ref='MyListView'
                    list={this.state.list}
                    EmptyView={
                        <View style={{ height: 450 * unitWidth, alignItems: 'center' }}>
                            <View style={{ flexDirection: 'row', flexWrap: 'wrap', marginVertical: 10 * unitWidth, marginHorizontal: 15 * unitWidth }}>
                                <Text style={{ fontSize: 14 * unitWidth, color: Colors.colorOrange }}>
                                    <Image style={{ width: 18 * unitWidth, height: 18 * unitWidth }} source={require('../res/me_tip.png')} resizeMode='stretch' />
                                    {'   企业用户创建子账户，可赋予该账户发询盘、发报价、跟踪订单等业务功能、但是不具备付款功能。'}
                                </Text>
                            </View>
                            <Image style={{
                                width: 328 * unitWidth,
                                height: 241 * unitWidth, marginTop: 40 * unitWidth
                            }} source={require('../res/bg_me_zzhgl.png')} resizeMode='stretch' />
                            <Text style={{ fontSize: 17 }}>暂时还未创建子账户，<Text style={{ color: Colors.colorOrange }} onPress={() => {
                                this.props.navigation.navigate('AddAccount')
                            }}>去创建</Text></Text>
                        </View>
                    }
                    renderItem={this.getItem.bind(this)}
                    getList={this.getData.bind(this)}
                />
            </View>
        );
    }

    getItem({ item, index }) {
        return (
            <View style={{ height: 145 * unitWidth, backgroundColor: Colors.white, marginTop: 5 * unitWidth, paddingHorizontal: 25 * unitWidth }}>
                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: 10 * unitWidth }}>
                    <Text style={{ color: Colors.black, fontSize: 15 }}>{item.username}</Text>
                    <TouchableOpacity activeOpacity={0.5} onPress={() => {
                        item.status = (item.status == '1' ? '0' : '1')
                        this.update(item);
                    }}>
                        <Image style={{ width: 51 * unitWidth, height: 23 * unitWidth }}
                            source={item.status == '0' ? require('../res/me_zzhglan1.png') : require('../res/me_zzhglan2.png')} resizeMode='stretch' />
                    </TouchableOpacity>
                </View>
                <Text style={{ color: Colors.color99, fontSize: 14, marginTop: 10 * unitWidth }}>手机号：{item.mobile}</Text>
                <View style={{ backgroundColor: Colors.colorEF, width: 340 * unitWidth, alignSelf: 'center', height: 0.5, marginVertical: 10 * unitWidth }} />
                <Text style={{ color: Colors.color66, fontSize: 14 }}>*权限分配</Text>
                <View style={{ marginTop: 12 * unitWidth, flexDirection: 'row', alignItems: 'center' }}>
                    <View style={{ flexDirection: 'row', alignItems: 'center', flex: 1 }}>
                        <TouchableOpacity activeOpacity={0.5} onPress={() => {
                            item.is_query = (item.is_query == '1' ? '0' : '1')
                            this.update(item);
                        }}>
                            <Image style={{ width: 16 * unitWidth, height: 16 * unitWidth }}
                                source={item.is_query == '1' ? require('../res/me_txgx2.png') : require('../res/me_txgx22.png')} resizeMode='stretch' />
                        </TouchableOpacity>
                        <Text style={{ color: Colors.black, fontSize: 15, marginLeft: 7 * unitWidth }}>查询</Text>
                    </View>
                    <View style={{ flexDirection: 'row', alignItems: 'center', flex: 1 }}>
                        <TouchableOpacity activeOpacity={0.5} onPress={() => {
                            item.is_invoice = (item.is_invoice == '1' ? '0' : '1')
                            this.update(item);
                        }}>
                            <Image style={{ width: 16 * unitWidth, height: 16 * unitWidth }}
                                source={item.is_invoice == '1' ? require('../res/me_txgx2.png') : require('../res/me_txgx22.png')} resizeMode='stretch' />
                        </TouchableOpacity>
                        <Text style={{ color: Colors.black, fontSize: 15, marginLeft: 7 * unitWidth }}>发单</Text>
                    </View>
                    <View style={{ flexDirection: 'row', alignItems: 'center', flex: 1 }}>
                        <TouchableOpacity activeOpacity={0.5} onPress={() => {
                            item.is_receipt = (item.is_receipt == '1' ? '0' : '1')
                            this.update(item);
                        }}>
                            <Image style={{ width: 16 * unitWidth, height: 16 * unitWidth }}
                                source={item.is_receipt == '1' ? require('../res/me_txgx2.png') : require('../res/me_txgx22.png')} resizeMode='stretch' />
                        </TouchableOpacity>
                        <Text style={{ color: Colors.black, fontSize: 15, marginLeft: 7 * unitWidth }}>接单</Text>
                    </View>
                    <View style={{ flexDirection: 'row', alignItems: 'center', flex: 1 }}>
                        <TouchableOpacity activeOpacity={0.5} onPress={() => {
                            item.is_pay = (item.is_pay == '1' ? '0' : '1')
                            this.update(item);
                        }}>
                            <Image style={{ width: 16 * unitWidth, height: 16 * unitWidth }}
                                source={item.is_pay == '1' ? require('../res/me_txgx2.png') : require('../res/me_txgx22.png')} resizeMode='stretch' />
                        </TouchableOpacity>
                        <Text style={{ color: Colors.black, fontSize: 15, marginLeft: 7 * unitWidth }}>待付款</Text>
                    </View>
                </View>
            </View>
        )
    }

    //获取
    getData(page) {
        let params = {

        }
        postFetch(api_member_info_SubAccountList, params, {
            success: (response) => {
                if (page == 1) {
                    this.refs.MyListView.onHasMore();
                    this.setState({
                        list: response.result,
                    })
                } else {
                    if (response.result && response.result.length > 0) {
                        this.refs.MyListView.onHasMore();
                        this.setState({
                            list: this.state.list.concat(response.result),
                        })
                    } else {
                        this.refs.MyListView.onNoMore();
                    }
                }
            },
            fail: (response) => {
                this.refs.MyListView.onNoMore();
                show(response.result.message);
            }
        })
    }

    update(info) {
        let params = {
            "id": info.id,
            "status": info.status,
            "is_query": info.is_query,
            "is_invoice": info.is_invoice,
            "is_receipt": info.is_receipt,
            "is_pay": info.is_pay,
        }
        postFetch(api_member_info_updateSubAccount, params, {
            success: (response) => {
                this.getData(1);
            },
            fail: (response) => {
                show(response.result.message);
            }
        })
    }
}